<template>
  <el-dialog 
    v-model="visible" 
    title="请选择案件" 
    width="680px"
    :close-on-click-modal="false"
    @close="handleClose"
  >
    <div class="case-list">
      <div 
        v-for="caseItem in cases" 
        :key="caseItem.id"
        class="case-card"
        :class="{ 
          selected: selectedCaseId === caseItem.id, 
          initial: isInitial(caseItem.id),
          disabled: isDisabled(caseItem)
        }"
        @click="selectCase(caseItem)"
      >
        <div class="case-header">
          <div class="header-left">
            <h3>{{ caseItem.case_name }}</h3>
          </div>
          <div class="header-right">
            <div class="tags-group">
              <el-tag v-if="caseItem.case_status" type="info" size="small" effect="plain">
                {{ caseItem.case_status }}
              </el-tag>
              <el-tag 
                v-if="caseItem.closed_status === 1" 
                type="danger" 
                size="small"
                effect="dark"
              >
                已结案
              </el-tag>
              <el-tag 
                v-else 
                type="success" 
                size="small"
                effect="light"
              >
                进行中
              </el-tag>
            </div>
          </div>
        </div>
        <div class="case-info">
          <span class="info-item">
            <span class="label">编号:</span> {{ caseItem.case_number }}
          </span>
          <span class="info-item">
            <span class="label">立案:</span> {{ formatDate(caseItem.case_start_time || caseItem.created_time) }}
          </span>
        </div>
      </div>
    </div>
    
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="handleConfirm" :disabled="!selectedCaseId || isDisabled(selectedCase)">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch, computed } from 'vue'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  cases: {
    type: Array,
    default: () => []
  },
  initialCaseId: {
    type: [String, Number],
    default: null
  },
  disableClosed: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:modelValue', 'confirm', 'cancel'])

const visible = ref(props.modelValue)
const selectedCaseId = ref(props.initialCaseId)

const selectedCase = computed(() => {
  return props.cases.find(c => c.id === selectedCaseId.value)
})

watch(() => props.modelValue, (val) => {
  visible.value = val
  if (val && props.initialCaseId) {
    selectedCaseId.value = props.initialCaseId
  }
})

watch(visible, (val) => {
  emit('update:modelValue', val)
})

const isInitial = (caseId) => {
  return caseId === props.initialCaseId
}

const isDisabled = (caseItem) => {
  if (!caseItem) return false
  if (!props.disableClosed) return false
  return caseItem.closed_status === 1
}

const selectCase = (caseItem) => {
  if (isDisabled(caseItem)) return
  selectedCaseId.value = caseItem.id
}

const handleConfirm = () => {
  if (!selectedCaseId.value) return
  const selected = props.cases.find(c => c.id === selectedCaseId.value)
  if (isDisabled(selected)) return
  
  emit('confirm', selected)
  visible.value = false
}

const handleClose = () => {
  emit('cancel')
  visible.value = false
}

const formatDate = (dateStr) => {
  if (!dateStr) return '-'
  const date = new Date(dateStr)
  return `${date.getFullYear()}/${String(date.getMonth() + 1).padStart(2, '0')}/${String(date.getDate()).padStart(2, '0')}`
}
</script>

<style scoped>
.case-list {
  max-height: 450px;
  overflow-y: auto;
  padding-right: 5px;
}

.case-card {
  border: 2px solid #e4e7ed;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: all 0.3s;
}

.case-card:hover:not(.disabled) {
  border-color: #409eff;
  background: #f0f9ff;
}

.case-card.selected:not(.disabled) {
  border-color: #409eff;
  background: #ecf5ff;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
}

.case-card.initial {
  border-color: #67c23a;
}

.case-card.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #f5f7fa;
}

.case-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.header-left h3 {
  margin: 0;
  font-size: 16px;
  color: #303133;
  font-weight: 600;
}

.header-right {
  flex-shrink: 0;
}

.tags-group {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.case-info {
  display: flex;
  gap: 24px;
  font-size: 13px;
  color: #606266;
}

.info-item {
  display: flex;
  align-items: center;
}

.info-item .label {
  color: #909399;
  margin-right: 4px;
}
</style>
